<link rel="stylesheet" type="text/css" href="__CSS__/gonggantu.css" />
<link rel="stylesheet" type="text/css" href="__CSS__/float_window.css" />
<link rel="stylesheet" type="text/css" href="__CSS__/bootcssButtons.css" />

{include file="index/canvas_structure_public" /}



<!--目标用户左边浮窗-->
<div id="target_user_window" style="text-align:center;position:fixed;z-index:99;left: 1%;top: 30%;width: 185px;height:185px;border: 3px ridge;background-color: rgba(111,177,223,0.34);">


    <div style="margin-top: 15px;">
        <img id="targetUserImg" src="__IMG__/target_user_icon.png" style="width: 117px;height: 117px;">
    </div>
    <div>目标用户：<br>
        <text style="color: red;">*</text>

        <input readonly id="newTargetUser" value="{$targetUser}" maxlength="100" placeholder="(目标用户未定义)" onmouseover="$(this).css('border-bottom','1px solid black')" onmouseout="$(this).css('border-bottom','2px solid transparent')"style="background:inherit;border: none;border-bottom: 2px solid transparent;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 170px;"/>


    </div>
</div>




<div style="width: 100%;text-align: center;font-size: 30px;">
    <div style="width: 130px;position: relative;margin-left: 45%;">
        共感图

        <div class="tooltip" style="width: 24px;height: 24px;position: absolute;top: 0%;left: 100%;">

            <img style="width: 24px;height: 24px;position: absolute;top: 0%;left: 0%;" src="__IMG__/explaination.png">

            <span class="tooltiptext" style="text-align:left;font-size: 14px;">用拟人化的方法，帮助我们将注意力集中在用户身上，通过收集大量信息，了解目标用户所想、所听、所见、所说，以此明确用户的痛点和需求点。
            </span>
        </div>

    </div>
</div>



<!--1.所想&所感；2.所听--><!--3.所见；4.所说&所做-->
<div class="table_row_main" style="display:table;min-height:200px;margin-left: 220px;margin-top: 10px;clear: both;">

    {volist name="types" id="t" offset="0" length="4"}

    <div class="typeBlock"  >
        <div class="title">
            <text>{$t.type_name}</text>
        </div>


        <div class="msg"  >
            {volist name="records" id="r"}

            {if condition="$r.type_name == $t.type_name "}

            {include file="index/canvas_template_public" /}


            {/if}
            {/volist}
        </div>
    </div>

    {/volist}
</div>




<!--附加：痛点；需求点-->
<div id="table_row_extra" style="display:table;min-height:200px;margin-left: 220px;margin-top: 10px;">

    {volist name="types" id="t" offset="4" length="2"}

    <div class="typeBlock"    >
        <div class="title" style="text-align: center;">
            <text>{$t.type_name}</text>
        </div>


        <div class="msg" style="width: 663px;" >
            {volist name="records" id="r"}

            {if condition="$r.type_name == $t.type_name "}

            {include file="index/canvas_template_public" /}

            {/if}
            {/volist}
        </div>
    </div>
    {/volist}
</div>


</div><!--closing tag for wholeCanvas div-->




<script>

    var allText = $(".record_area");

    for(var i=0; i < allText.length; i++)
        autoTextarea(allText[i]);// 调用


    //生成随机数
    /*var randomNum = Math.floor(Math.random()*6 + 1);
    //console.log(randomNum);
    var targetUserImg = $('#targetUserImg').attr('src');
    var newImgPath = targetUserImg.substring(0,targetUserImg.length - 5) + randomNum + ".jpg";

    //console.log(newImgPath);
    $('#targetUserImg').attr('src',newImgPath);
*/

</script>